<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<title>underscore</title>
	</head>

	<body>
		<!-- 用于显示渲染后的标签 -->
		<ul id="element"></ul>

		<script src="vendor/underscore-min.js"></script>
		<script src="vendor/zepto.min.js"></script>
		<!-- 定义模板，将模板内容放到一个script标签中 -->
		<script type="text/template" id="tpl">
			<% for(var i = 0; i < list.length; i++) { %>
				<% var item = list[i] %>
				<li>
					<span><%=item.firstName%> <%=item.lastName%></span>
					<span><%-item.city%></span>
					<hr>
				</li>
			<% } %>
		</script>

		<script type="text/javascript">
			// 获取渲染元素和模板内容  
			var element = $('#element'),
				tpl = $('#tpl').html();

			// 创建数据, 这些数据可能是你从服务器获取的  
			var list = [{
				firstName: '<a href="#">Zhang</a>',
				lastName: 'San',
				city: 'Shanghai'
			}, {
				firstName: 'Li',
				lastName: 'Si',
				city: '<a href="#">Beijing</a>'
			}, {
				firstName: 'Wang',
				lastName: 'Wu',
				city: 'Guangzhou'
			}, {
				firstName: 'Zhao',
				lastName: 'Liu',
				city: 'Shenzhen'
			}]

			// 解析模板, 返回解析后的内容  
			var render = _.template(tpl);
			// 将返回的函数存储起来（就像我将它存储在render变量中一样），再通过调用该函数来渲染数据，特别是在同一个模板可能会被多次渲染的情况下，这样做能提高执行效率
			var htmlContent = render(list);
			// var htmlContent = _.template(tpl, list);
			// 将解析后的内容填充到渲染元素  
			element.html(htmlContent);
		</script>
	</body>

</html>